<template>
  <div class="china-map-3d-box">
    <div class="header">
      <div class="title">
        <span style="cursor: pointer;" v-for="(item,index) in mapName" :key="index">
          <span @click="chooseMap(item)">{{ item }}</span>
        </span>
      </div>
      <div class="tool" @click="goToWaterBallPage">
        {{ $store.state.fullScreenStatus["chinaMap3d"] ? "返回主页" : "全屏" }}
      </div>
    </div>
    <div class="china-map-3d" ref="china-map-3d">我是水球图</div>
  </div>
</template>

<script>
/*
 *@Date: 2023-11-15 09:39:24
 *@Description: 模块描述
 */
import { mapMutations } from "vuex"
import "@/utils/echarts-wordcloud.min.js"
import $ from "jquery"
export default {
  name: "",
  data() {
    return {
      mapName: [],
      param: null,
      myCharts: null,
      cityProper: {
        杭州市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330100_full.json",
        宁波市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330200_full.json",
        温州市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330300_full.json",
        台州市:
          "https://www.isqqw.com/asset/get/areas_v3/city/331000_full.json",
        嘉兴市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330400_full.json",
        湖州市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330500_full.json",
        绍兴市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330600_full.json",
        金华市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330700_full.json",
        衢州市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330800_full.json",
        舟山市:
          "https://www.isqqw.com/asset/get/areas_v3/city/330900_full.json",
        丽水市:
          "https://www.isqqw.com/asset/get/areas_v3/city/331100_full.json",
        泰州市:
          "https://www.isqqw.com/asset/get/areas_v3/city/331200_full.json",
        宿迁市:
          "https://www.isqqw.com/asset/get/areas_v3/city/331300_full.json",
      },
      data: [
        {
          name: "杭州市",
          value: 1,
        },
        {
          name: "湖州市",
          value: 2,
        },
        {
          name: "嘉兴市",
          value: 3,
        },
        {
          name: "金华市",
          value: 4,
        },
        {
          name: "丽水市",
          value: 5,
        },
        {
          name: "宁波市",
          value: 6,
        },
        {
          name: "衢州市",
          value: 7,
        },
        {
          name: "绍兴市",
          value: 8,
        },
        {
          name: "台州市",
          value: 9,
        },
        {
          name: "温州市",
          value: 10,
        },
        {
          name: "舟山市",
          value: 11,
        },
        {
          name: "泰州市",
          value: 12,
        },
        {
          name: "宿迁市",
          value: 13,
        },
      ],
      splitList: [
        {
          start: 1,
          end: 1,
          label: "杭州市",
          color: "#236da8",
        },
        {
          start: 2,
          end: 2,
          label: "湖州市",
          color: "#2884db",
        },
        {
          start: 3,
          end: 3,
          label: "嘉兴市",
          color: "#244779",
        },
        {
          start: 4,
          end: 4,
          label: "金华市",
          color: "#246198",
        },
        {
          start: 5,
          end: 5,
          label: "丽水市",
          color: "#2884db",
        },
        {
          start: 6,
          end: 6,
          label: "宁波市",
          color: "#2884db",
        },
        {
          start: 7,
          end: 7,
          label: "衢州市",
          color: "#244779",
        },
        {
          start: 8,
          end: 8,
          label: "绍兴市",
          color: "#244779",
        },
        {
          start: 9,
          end: 9,
          label: "台州市",
          color: "#244779",
        },
        {
          start: 10,
          end: 10,
          label: "温州市",
          color: "#246198",
        },
        {
          start: 11,
          end: 11,
          label: "舟山市",
          color: "#2884db",
        },
        {
          start: 12,
          end: 12,
          label: "泰州市",
          color: "#2884db",
        },
        {
          start: 13,
          end: 13,
          label: "宿迁市",
          color: "#244779",
        },
      ],
      option: {},
    }
  },
  created() {},
  mounted() {
    this.initEcharts()
    window.addEventListener("resize", this.screenUpdate)
  },
  destroyed() {
    this.myCharts.off("click", this.chartClick)
    this.myCharts.dispose()
    this.myCharts = null
    window.removeEventListener("resize", this.screenUpdate())
  },
  methods: {
    ...mapMutations([
      //使用es6的拓展运算符
      "changeFullScreenStatus",
    ]),
    // 初始化图表
    initEcharts() {
      const _this = this
      const chinaMap3d = document.querySelector(".china-map-3d")
      _this.myCharts = _this.$echarts.init(chinaMap3d)
      $.get(
        "https://www.isqqw.com/asset/get/areas_v3/province/330000_full.json",
        (getJSON) => {
          _this.$echarts.registerMap("浙江", getJSON)
          this.mapName.push("浙江")
          _this.option = {
            series: [
              {
                tooltip: {
                  trigger: "item",
                },
                name: "浙江",
                type: "map3D",
                map: "浙江",
                boxDepth: 100, //地图倾斜度
                regionHeight: _this.$fitChartFont(4), //地图厚度
                label: {
                  show: true, //是否显示市
                  textStyle: {
                    color: "#fff", //文字颜色
                    fontSize: _this.$fitChartFont(12), //文字大小
                    fontFamily: "微软雅黑",
                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
                  },
                },
                itemStyle: {
                  color: "#267fbc", //地图颜色
                  borderWidth: _this.$fitChartFont(1), //分界线wdith
                  borderColor: "#2cf7fe", //分界线颜色
                },

                groundplane: {
                  show: false,
                },
                data: [],
                shading: "realistic",
                // 真实感材质相关配置 shading: 'realistic'时有效
                realisticMaterial: {
                  detailTexture: "#fff", // 纹理贴图
                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
                  metalness: 0, // 0材质是非金属 ，1金属
                  roughnessAdjust: 0,
                },
                viewControl: {
                  distance:
                    130 / (this.$fitChartFont(130) / this.$fitChartFont(130)), // 地图视角 控制初始大小
                  rotateSensitivity: 1, // 旋转
                  zoomSensitivity: 1, // 缩放
                },
              },
            ],
            // dataRange: {
            //   show: false,
            //   splitList: _this.splitList,
            // },
            animation: false,
          }
          if (_this.myCharts) {
            _this.myCharts.setOption(_this.option,true)
          }
          _this.myCharts.on("click", _this.chartClick)
        }
      )
    },
    // 图表socket数据更新
    updateData() {
      // const option = {
      // }
      // this.myCharts.setOption(option)
      // this.myCharts.resize()
    },
    // 视口大小改变时，图表渲染
    screenUpdate() {
      const _this = this
      if (this.param) {
        this.chartClick(this.param)
      } else {
        $.get(
          "https://www.isqqw.com/asset/get/areas_v3/province/330000_full.json",
          (getJSON) => {
            _this.$echarts.registerMap("浙江", getJSON)
            _this.option = {
              series: [
                {
                  tooltip: {
                    trigger: "item",
                  },
                  name: "浙江",
                  type: "map3D",
                  map: "浙江",
                  boxDepth: 100, //地图倾斜度
                  regionHeight: _this.$fitChartFont(4), //地图厚度
                  label: {
                    show: true, //是否显示市
                    textStyle: {
                      color: "#fff", //文字颜色
                      fontSize: _this.$fitChartFont(12), //文字大小
                      fontFamily: "微软雅黑",
                      backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
                    },
                  },
                  itemStyle: {
                    color: "#267fbc", //地图颜色
                    borderWidth: _this.$fitChartFont(1), //分界线wdith
                    borderColor: "#2cf7fe", //分界线颜色
                  },
                  groundplane: {
                    show: false,
                  },
                  data: [],
                  shading: "realistic",
                  // 真实感材质相关配置 shading: 'realistic'时有效
                  realisticMaterial: {
                    detailTexture: "#fff", // 纹理贴图
                    textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                    roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
                    metalness: 0, // 0材质是非金属 ，1金属
                    roughnessAdjust: 0,
                  },
                  viewControl: {
                    distance:
                      130 / (this.$fitChartFont(130) / this.$fitChartFont(130)), // 地图视角 控制初始大小
                    rotateSensitivity: 1, // 旋转
                    zoomSensitivity: 1, // 缩放
                  },
                },
              ],
              // dataRange: {
              //   show: false,
              //   // splitList: _this.splitList,
              // },
              animation: false,
            }
            if (_this.myCharts) {
              _this.myCharts.setOption(_this.option,true)
              _this.myCharts.resize()
              _this.myCharts.on("click", _this.chartClick)
            }
          }
        )
      }
    },
    chartClick(param) {
      this.param = param
      const _this = this
     try {
      var selectedPro = param.name
      if (!_this.cityProper[selectedPro]) {
        _this.option.series.splice(1)
        _this.option.legend = null
        _this.option.visualMap = null
        _this.myCharts.setOption(_this.option, true)
        _this.myCharts.resize()
        return
      }
      //获取点击区域数据
      $.get(_this.cityProper[selectedPro], function (geojson) {
        _this.$echarts.registerMap(selectedPro, geojson)
        _this.mapName.push('>'+selectedPro)
        _this.option.series[0] = {
          name: selectedPro,
          type: "map3D",
          map: selectedPro,
          boxDepth: 100, //地图倾斜度
          regionHeight: _this.$fitChartFont(4), //地图厚度
          label: {
            show: true, //是否显示市
            textStyle: {
              color: "#fff", //文字颜色
              fontSize: _this.$fitChartFont(12), //文字大小
              fontFamily: "微软雅黑",
              backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
            },
          },
          itemStyle: {
            color: "#267fbc", //地图颜色
            borderWidth: _this.$fitChartFont(1), //分界线wdith
            borderColor: "#2cf7fe", //分界线颜色
          },

          groundplane: {
            show: false,
          },
          data: [],
          shading: "realistic",
          // 真实感材质相关配置 shading: 'realistic'时有效
          realisticMaterial: {
            detailTexture: "#fff", // 纹理贴图
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
            metalness: 0, // 0材质是非金属 ，1金属
            roughnessAdjust: 0,
          },
          viewControl: {
            distance:
              130 / (_this.$fitChartFont(130) / _this.$fitChartFont(130)), // 地图视角 控制初始大小
            rotateSensitivity: 1, // 旋转
            zoomSensitivity: 1, // 缩放
          },
        }
        if (_this.myCharts) {
          _this.myCharts.setOption(_this.option, true)
          _this.myCharts.resize()
        }
      })
     } catch (error) {
      console.log('error -----> ', error);
     }
    },
    chooseMap(mapName){
      const _this = this
      if(mapName==='浙江'){
        this.mapName=[]
        this.mapName.push('浙江')
        $.get(
          "https://www.isqqw.com/asset/get/areas_v3/province/330000_full.json",
          (getJSON) => {
            _this.$echarts.registerMap("浙江", getJSON)
            _this.option = {
              series: [
                {
                  tooltip: {
                    trigger: "item",
                  },
                  name: "浙江",
                  type: "map3D",
                  map: "浙江",
                  boxDepth: 100, //地图倾斜度
                  regionHeight: _this.$fitChartFont(4), //地图厚度
                  label: {
                    show: true, //是否显示市
                    textStyle: {
                      color: "#fff", //文字颜色
                      fontSize: _this.$fitChartFont(12), //文字大小
                      fontFamily: "微软雅黑",
                      backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
                    },
                  },
                  itemStyle: {
                    color: "#267fbc", //地图颜色
                    borderWidth: _this.$fitChartFont(1), //分界线wdith
                    borderColor: "#2cf7fe", //分界线颜色
                  },
                  groundplane: {
                    show: false,
                  },
                  data: [],
                  shading: "realistic",
                  // 真实感材质相关配置 shading: 'realistic'时有效
                  realisticMaterial: {
                    detailTexture: "#fff", // 纹理贴图
                    textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
                    roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
                    metalness: 0, // 0材质是非金属 ，1金属
                    roughnessAdjust: 0,
                  },
                  viewControl: {
                    distance:
                      130 / (this.$fitChartFont(130) / this.$fitChartFont(130)), // 地图视角 控制初始大小
                    rotateSensitivity: 1, // 旋转
                    zoomSensitivity: 1, // 缩放
                  },
                },
              ],
              // dataRange: {
              //   show: false,
              //   // splitList: _this.splitList,
              // },
              animation: false,
            }
            if (_this.myCharts) {
              _this.myCharts.setOption(_this.option,true)
              _this.myCharts.resize()
              _this.myCharts.on("click", _this.chartClick)
            }
          }
        )
      }
    },
    goToWaterBallPage() {
      if (!this.$store.state.fullScreenStatus.chinaMap3d) {
        this.$router.push("/chinaMap3dPage")
        this.changeFullScreenStatus({ type: "chinaMap3d", value: true })
      } else {
        this.$router.back(1)
        this.changeFullScreenStatus({ type: "chinaMap3d", value: false })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.china-map-3d,
.china-map-3d-box {
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    position: absolute;
    width: 100%;
    padding: vw(5);
    z-index: 9;
    display: flex;
    justify-content: space-between;
    .title {
      color: white;
      font-size: vw(20);
    }
    .tool {
      cursor: pointer;
      color: white;
      font-size: vw(20);
    }
  }
}
</style>

